<script>
import {getUserListFn}  from  '@/api/user'

export default {
    data(){
        return{
            //用户列表
            userList:[],
            currentPage:1,
        }
    },
    mounted(){
        getUserListFn().then(res=>{
            if(res.code==200){
            this.userList=res.data
            console.log('用户列表接收成功！');
            }else{
            console.log('用户列表接收失败！');
            }
        })
    },
    computed:{
        tableData(){
            return this.userList.slice((this.currentPage-1)*12, (this.currentPage-1)*12+12)
        }
    }
}

</script>
<template>
    <h4>用户列表</h4>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="margin-bottom:20px">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>账号管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 渲染 -->
    <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="180">
        <template #default="scope">
            <el-tag>
                {{(currentPage-1)*12+1+ scope.$index }} 
            </el-tag>
        </template>
    </el-table-column>
    <el-table-column prop="nickname" label="用户名" width="180" />
    <el-table-column prop="tel" label="手机号" />
    <el-table-column prop="telcode" label="验证码" />
  </el-table>
  <el-pagination :page-size="12" v-model:current-page="currentPage"  background  layout="prev, pager, next" :total="userList.length"  />
</template>